<template>
  <div class="program">
    <div class="video">
      <div class="con">
        <div>
          <el-tag type="success">自己{{ option.uid }}</el-tag>
          <div ref="localvideoRef" class="localVideo">
            <div class="agora-video">
              <StreamPlayer :stream="localStream" :domId="localStream.getId()" v-if="localStream"></StreamPlayer>
            </div>
          </div>
        </div>
        <div>
          <el-tag>对方</el-tag>
          <div ref="remotevideoRef" class="remoteVideo">
            <div class="agora-video" :key="index" v-for="(remoteStream, index) in remoteStreams">
              <StreamPlayer :stream="remoteStream" :domId="remoteStream.getId()"></StreamPlayer>
            </div>
          </div>
        </div>
        <div class="control">
          <div>
            <el-button size="small" type="success" plain round @click="joinEvent">join</el-button>
            <el-button size="small" type="warning" plain round @click="leaveEvent">leave</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="code">
      <CodeAreaVue></CodeAreaVue>
    </div>
  </div>
</template>

<script>
import RTCClient from "./agora-rtc-client";
import StreamPlayer from "./stream-player";
// import Coder from './code';
import CodeAreaVue from "./CodeArea.vue";
import { log } from './utils';
export default {
  components: {
    StreamPlayer,
    CodeAreaVue
  },
  data() {
    return {
      rtc: new RTCClient(),
      option: {
        // Pass your App ID here.
        appid: "3d38246f5aee45de8bd8d57a536d94eb",
        // Set the channel name.
        channel: "ch2",
        // Pass your temp token here.
        token: "0063d38246f5aee45de8bd8d57a536d94ebIAATnYiOkjNr78fw9xlsZTHyn0HaFCvuuSwC+tRKpTMPM0QcI9AAAAAAEAASVDxD3WF/YgEAAQDdYX9i",
        // Set the user ID.
        uid: this.$cookies.get('cid'),
      },
      showJoin: false,
      localStream: null,
      remoteStreams: [],
    }
  },
  created() {
    let rtc = this.rtc
    rtc.on('stream-added', (evt) => {
        console.log('added');
      let { stream } = evt
      log("[agora] [stream-added] stream-added", stream.getId())
      rtc.client.subscribe(stream) //subscribe  
    })

    rtc.on('stream-subscribed', (evt) => {
        console.log('subscribed');
      let { stream } = evt
      log("[agora] [stream-subscribed] stream-added", stream.getId())
      if (!this.remoteStreams.find((it) => it.getId() === stream.getId())) {
        this.remoteStreams.push(stream)
      }
    })

    rtc.on('stream-removed', (evt) => {
      let { stream } = evt
      log('[agora] [stream-removed] stream-removed', stream.getId())
      this.remoteStreams = this.remoteStreams.filter((it) => it.getId() !== stream.getId())
    })
  },

  updated() {
    // this.startBasicCall()
  },
  methods: {
    joinEvent() {
      if (!this.option.appid) {
        this.judge('Appid')
        return
      }
      if (!this.option.channel) {
        this.judge('Channel Name')
        return
      }
      this.rtc.joinChannel(this.option).then(() => {
        this.$message({
          message: 'Join Success',
          type: 'success'
        });
        this.rtc.publishStream().then(() => {//创建音视频流 并且进行推流
          this.$message({
            message: 'Publish Success',
            type: 'success'
          });
          this.localStream = this.rtc.localStream// 音视频流对象
          // this.localStream.play(this.localStreams.getId(), { fit: 'cover' }, (err) => {
          //   console.log(err);
          //   if (err && err.status !== 'aborted') {
          //     console.warn('trigger autoplay policy')
          //   }
          // })
        }).catch((err) => {
          this.$message.error('Publish Failure');
          log('publish local error', err)
        })
      }).catch((err) => {
        this.$message.error('Join Failure');
        log('join channel error', err)
      })
      this.showJoin = true
    },
    leaveEvent() {
      this.showJoin = false
      this.rtc.leaveChannel().then(() => {//离开频道
        this.$message({
          message: 'Leave Success',
          type: 'success'
        });
      }).catch((err) => {
        this.$message.error('Leave Failure')
        log('leave error', err)
      })
      this.localStream = null
      this.remoteStreams = []
    },
    judge(detail) {
      this.$notify({
        title: 'Notice',
        message: `Please enter the ${detail}`,
        position: 'top-left',
        type: 'warning'
      });
    },
  }
}
</script>

<style scope>
.el-tag {
  margin: 10px;
}
.program {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
}

.video {
  padding: 10px 25px;
  width: 20%;
  background-color: aliceblue
}

.con {}

.control>div {
  padding: 38px;
}

.input {
  width: 100px;
}

.remoteVideo {
  width: 230px;
  height: 160px;
  background-color: antiquewhite;
}

.localVideo {
  width: 230px;
  height: 160px;
  background-color: antiquewhite;
}

.agora-video {
  width: 230px;
  height: 160px;
  margin: auto;


}

.code {
  width: 80%;
  background-color: #fffffe;
}
</style>